<template>
	<view class="publish-page">
		<view class="top">
			<JyStatusBar></JyStatusBar>
			<JyTitleBar :title="info.name" :color="'#333'" :hasArrow="true" />
		</view>

		<view class="head">
			<view class="type-title">
				<view :class="['type-item', type == 'course' ? 'active' : '']"
					@click="typeChange('course')">
					按科目公布</view>
				<view :class="['type-item', type == 'class' ? 'active' : '']"
					@click="typeChange('class')">
					按班级公布</view>
			</view>
		</view>

		<view class="course-list">
			<view class="grade-rank" v-if="info.publish">
				<view class="rank-link" @click="goGradeRank">
					年级排名 <u-icon name="arrow-right" color="#4174FD"
						style="margin-left: 20rpx;"></u-icon>
				</view>
			</view>
			<view class="course-item" v-for="item in list"
				:key=" item.updateTime">
				<view class="name-num" @click="goInfo(item)">
					<view class="name">
						{{type == 'class' ? item.className : item.courseName}}
					</view>
					<view class="num">
						{{item.publishNum}}/{{item.allNum}}
					</view>
				</view>
				<view class="time" @click="goInfo(item)">
					<view>最近更新时间：{{item.updateTime}}</view>
					<text>当前发布</text>
				</view>

				<view class="publish-btn" @click="goInfo(item)">
					公布班级排名
				</view>
			</view>
		</view>

		<view class="action-btn">
			<view class="reset" @click="allOpen">
				{{info.openGradeRank ? '取消公布年级排名' : '公布年级排名'}}
			</view>
			<view class="reset" @click="gradePublishCheckFn">
				{{info.publish ? '一键取消发布' : '一键发布'}}
			</view>
		</view>

		<u-modal :show="show" :title="title" showCancelButton
			@cancel="show =false" @confirm="confirm"
			:confirmColor="info.openGradeRank ? '#999999' :'#4174FD'"
			:cancelColor="info.openGradeRank ? '#FE4F54' :'#999999'">
			<view style="width:100%;color:#999999;text-align: center;"
				v-if="info.openGradeRank">
				<view>取消后，</view>
				<view>相关教师和家长将无法查看排名。</view>
			</view>
			<view style="width:100%;color:#999999;text-align: center" v-else>
				<view>公布后，</view>
				<view>相关教师和家长可以查看排名。</view>
			</view>
		</u-modal>
            <u-popup :show="showPublish" :round="10" mode="center" @close="close" :closeable="true">
      <view class="wrap wraps">
        <view class="title"><text>请选择发布方式</text></view>
        <view class="content" style="margin-top: 60rpx;">
          <view :class="['btns',selectState  ? 'btnsNo' : '']" @click="publichs('score')">
            <text>分数</text>
          </view>
          <view :class="['btns',selectState  ? '' : 'btnsNo']" style="margin-left: 30rpx;" @click="publichs('lv')">
            <text>等级</text>
          </view>
        </view>
        <view style="margin-top: 60rpx;">
          <!-- <view class="surebtn" @click="setscore"> -->
          <view class="surebtn" @click="examGradePublishFn">
            <text>发布</text>
          </view>
        </view>
      </view>
    </u-popup>
	</view>
</template>

<script>
	import JyTitleBar from "@/components/jyTitleBar.vue";
	import JyStatusBar from "@/components/jyStatusBar.vue";

	import {
		simpleDetail,
		openCourse,
		openClass,
		classRankToggle,
		gradeRankToggle,
		planPublishToggle,
        gradePublishCheck,
        examGradePublish
	} from '@/pages/achievement/api/teacher.js'

	export default {
		components: {
			JyStatusBar,
			JyTitleBar,
		},
		data() {
			return {
                isPublish: false,
                settingLevelFlag: false,
                selectState: false,
                showPublish: false,
				title: '',
				show: false,
				type: 'course',
				examId: "",
				info: {},
				list: [],
				task: {},
			};
		},
		onLoad(options) {
			if (options?.examId) {
				this.examId = options.examId
				this.getInfo()
			}
		},
		methods: {
            close(){
                this.showPublish = false
            },

            publichs(type) {
      if (type === "lv") {
        this.selectState = true
        if (!this.settingLevelFlag) {
          this.selectState = false
          uni.showToast({
            title: "该考试未设置等级规则,暂时无法按照等级发布",
            icon: "none",
            duration: 2000,
          })
        }
      } else {
        this.selectState = false
      }
    },
			async getInfo() {
				const { data } = await simpleDetail(this.examId)
				this.info = data
				// this.getCourseList()
				if (this.type == 'course') {
					this.getCourseList()
				} else {
					this.getClassList()
				}
			},
			async getCourseList() {
				const data = await openCourse(this.examId);
				this.list = data?.data?.list
			},
			async getClassList() {
				const data = await openClass(this.examId);
				this.list = data?.data?.list
			},
			goInfo(item) {
				let id = this.type == 'course' ? item.courseId : item.classId
				const data = JSON.stringify(item)
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/publishInfo?id=${id}&type=${this.type}&examId=${this.examId}&item=${data}&title=${this.info.name}`
				});
			},
			typeChange(type) {
				this.type = type
				if (type == 'course') {
					this.getCourseList()
				} else {
					this.getClassList()
				}
			},

			allOpen() {
				if (!this.info.openGradeRank) {
					this.title = '公布排名'
				} else {
					this.title = '确定取消公布排名？'
				}
				this.show = true
			},
			async confirm() {
				try {
					await gradeRankToggle(this.examId)
					uni.showToast({
						icon: 'none',
						title: '操作成功',
					});
					this.getInfo()
					this.show = false
				} catch (error) {
					console.log(error)
				}

			},
            async gradePublishCheckFn() {
                if(!this.info.publish){
                    const data = await gradePublishCheck(this.examId)
                    if (data.success) {
                      console.log("data", data)
                      if (data.data.useLevelFlag) {
                        // 直接录入等级,无分数,直接发布
                      //   this.planPublishDetailToggleFn()
                      this.examGradePublishFn()
                      } else {
                        // 学校是否设置等级转换规则（true：有设置等级转换，false：无设置）
                        this.showPublish = true
                        this.settingLevelFlag = data.data.settingLevelFlag
                      }
                    }
                }else{
                      this.examGradePublishFn()
                }
    },
   async examGradePublishFn(){
        const params = {
          examId: this.examId, 
          isPublish: !this.info.publish,
          useLevelFlag: !this.info.publish?this.selectState: undefined,
        }
        try {
          await examGradePublish(params)
          uni.showToast({
            icon: "success",
            title: "操作成功",
          })
          this.getInfo()
          this.showPublish = false
        } catch (error) {
          console.log(error)
          this.showPublish = false
        }
    },
			// 切换发布状态  已废弃
			// async publishAll() {
			// 	try {
			// 		await planPublishToggle(this.examId)
			// 		uni.showToast({
			// 			icon: 'none',
			// 			title: '操作成功',
			// 		});
			// 		this.getInfo()
			// 	} catch (error) {
			// 		console.log(error)
			// 	}
			// },
			goGradeRank(){
				uni.navigateTo({
					url: `/pages/achievement/pages/teacher/gradeRank?examId=${this.examId}`
				});
			}
		}
	};
</script>

<style lang="scss" scoped>
	.publish-page {
		height: 100vh;
		overflow: hidden;
		background: #f2f4f9;

		.top {
			width: 100%;
			height: 148rpx;
			background-color: #fff;
		}

		.type-title {
			box-sizing: border-box;
			width: 100%;
			height: 88rpx;
			display: flex;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 0 30rpx;
			background-color: #fff;

			.type-item {
				position: relative;
				width: 344rpx;
				height: 88rpx;
				line-height: 88rpx;
				text-align: center;
				color: #333;
				font-size: 30rpx;
			}

			.active {
				color: #4174fd;

				&::after {
					position: absolute;
					left: calc(50% - 15rpx);
					bottom: 8rpx;
					display: block;
					content: " ";
					width: 30rpx;
					height: 6rpx;
					background: #4275fd;
					border-radius: 4rpx;
				}
			}
		}

		.course-list {
			height: calc(100vh - 148rpx - 88rpx - 10rpx);
			overflow-y: scroll;
			padding: 0 30rpx 176rpx;


			.course-item {
				box-sizing: border-box;
				width: 100%;
				height: 234rpx;
				background: #fafafa;
				border-radius: 16rpx;
				padding: 32rpx 24rpx 0;
				margin-bottom: 20rpx;
			}

			.name-num {
				display: flex;
				justify-content: space-between;
				align-items: center;
				height: 42rpx;
				font-size: 30rpx;
				margin-bottom: 4rpx;

				.name {
					font-weight: 600;
				}
			}

			.time {
				display: flex;
				justify-content: space-between;
				align-items: center;
				font-size: 26rpx;
				color: #999;
				height: 36rpx;
				margin-bottom: 32rpx;
			}

			.publish-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				box-shadow: 0px 0.5px 0px 0px #e5e5e5 inset;
				font-size: 30rpx;
				text-align: center;
				color: #4174fd;
			}
		}


		.action-btn {
			position: fixed;
			bottom: 0;
			left: 0;
			z-index: 10;
			width: 100%;
			box-sizing: border-box;
			height: 170rpx;
			background: #ffffff;
			box-shadow: 0px -2rpx 0px 0px #e5e5e5;
			// margin-bottom: 68rpx;
			padding: 14rpx 32rpx 80rpx 32rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.reset {
				width: 330rpx;
				height: 72rpx;
				border: 2rpx solid #4174fd;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 400;
				text-align: center;
				color: #4174fd;
				line-height: 72rpx;
			}

			.entry {
				width: 330rpx;
				height: 72rpx;
				border-radius: 38rpx;
				font-size: 30rpx;
				font-weight: 400;
				text-align: center;
				color: #ffffff;
				line-height: 72rpx;
				background: #4174fd;
			}
		}
	}

	.grade-rank {
		display: flex;
		justify-content: flex-end;

		.rank-link {
			display: flex;
			justify-content: flex-start;
			color: #4174FD;
			padding: 0 20rpx 30rpx;
		}
	}
    .wraps{
  height: 400rpx !important;

}
.wrap {
  width: 650rpx;
  height: 450rpx;

  .title {
    text-align: center;
    margin-top: 50rpx;
  }

  .content {
    display: flex;
    justify-content: space-around;
    margin-top: 20rpx;

    .btns {
      width: 200rpx;
      height: 80rpx;
      background: royalblue;
      border-radius: 10rpx;
      text-align: center;
      color: white;
      line-height: 80rpx;
    }
    .btnsNo {
      background: gray;
    }
  }

  .surebtn {
    width: 200rpx;
    height: 80rpx;
    margin-left: 440rpx;
      border-radius: 10rpx;

    background: royalblue;
    text-align: center;
    color: white;
    line-height: 80rpx;
  }
}
</style>
